রাউট গার্ড (Route Guard) হল একটি শক্তিশালী Angular ফিচার যা রাউটের অ্যাক্সেস নিয়ন্ত্রণ করতে সাহায্য করে। রাউট গার্ড সাধারণত ব্যবহার করা হয় যখন আপনি চান যে কিছু রাউটে নেভিগেট করার আগে একটি নির্দিষ্ট শর্ত পূর্ণ হতে হবে, যেমন ইউজার অথেন্টিকেশন চেক বা অথরাইজেশন চেক। Angular-এ বিভিন্ন ধরনের রাউট গার্ড রয়েছে, যেমন CanActivate, CanActivateChild, CanDeactivate, CanLoad ইত্যাদি।

এখানে আমরা দেখব কিভাবে একটি CanActivate রাউট গার্ড ইমপ্লিমেন্ট করা যায়।

রাউট গার্ড কিভাবে কাজ করে?

রাউট গার্ডগুলি রাউটিং সিস্টেমে একটি বিশেষ দায়িত্ব পালন করে:

• CanActivate: রাউট অ্যাক্সেস করার আগে গার্ডটি ইউজারের অনুমতি চেক করে।
• CanDeactivate: ব্যবহারকারী যদি বর্তমান রাউটটি ছেড়ে যেতে চান, তবে গার্ডটি চেক করবে যে, তারা আসলেই রাউটটি ছাড়তে চায় কিনা।
• CanLoad: রাউটটি লোড হওয়ার আগে চেক করে।

রাউট গার্ড তৈরি করা

১. রাউট গার্ড সার্ভিস তৈরি করা: Angular CLI দিয়ে রাউট গার্ড তৈরি করতে:

ng generate guard auth

এটি একটি auth.guard.ts ফাইল তৈরি করবে, যেখানে গার্ডের লজিক থাকবে।

২. CanActivate গার্ড ইমপ্লিমেন্ট করা: CanActivate গার্ডের মাধ্যমে আপনি চেক করতে পারেন যে, ইউজার রাউট অ্যাক্সেস করতে পারবে কিনা।

auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';  // আপনার AuthService এখানে ইমপোর্ট করতে হবে

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      // এখানে আপনি আপনার AuthService ব্যবহার করে চেক করতে পারেন
      if (this.authService.isAuthenticated()) {
        return true; // যদি ইউজার অথেন্টিকেটেড থাকে, রাউট অ্যাক্সেস অনুমতি দিন
      } else {
        this.router.navigate(['/login']); // যদি ইউজার অথেন্টিকেটেড না থাকে, লগইন পেজে রিডিরেক্ট করুন
        return false;
      }
  }
}

এখানে:

• AuthService হচ্ছে একটি সার্ভিস যা ইউজারের অথেন্টিকেশন স্টেট চেক করবে (এটি আপনার অ্যাপ্লিকেশন অনুযায়ী কাস্টমাইজ করা যাবে)।
• canActivate মেথডটি যদি true রিটার্ন করে, তবে রাউট অ্যাক্সেস করা যাবে, অন্যথায় ইউজারকে অন্য পেজে রিডিরেক্ট করা হবে।

৩. রাউট কনফিগারেশনে গার্ড যুক্ত করা: একবার রাউট গার্ড তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে যুক্ত করতে হবে।

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]  // AuthGuard যুক্ত করা হল
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• canActivate: [AuthGuard] দিয়ে রাউট গার্ড যুক্ত করা হয়েছে। এর মানে হলো, dashboard রাউট অ্যাক্সেস করতে গেলে AuthGuard প্রথমে ইউজারের অথেন্টিকেশন চেক করবে।

রাউট গার্ডের অন্যান্য ধরনের ব্যবহার

Angular-এ আরও কিছু গার্ড রয়েছে, যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে:

• CanDeactivate: বর্তমান রাউট থেকে বের হওয়ার আগে গার্ড ব্যবহার করা হয়। এটি সাধারণত ফর্ম সাবমিশন বা ডেটা লস প্রিভেন্ট করার জন্য ব্যবহৃত হয়।

  Example:

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    return confirm('Do you really want to leave this page?');
  }
  

• CanLoad: যখন আপনি lazy-loaded মডিউল লোড করবেন, তখন CanLoad গার্ড ব্যবহার করা হয়। এটি ব্যবহারকারীর অনুমতি চেক করে যে, তারা এই মডিউলটি লোড করতে পারবে কিনা।

  Example:

  canLoad(): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
  

সারাংশ

রাউট গার্ড ব্যবহার করে আপনি Angular অ্যাপে রাউট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। CanActivate গার্ড ব্যবহার করে আপনি রাউট লোড হওয়ার আগে ইউজারের অনুমতি চেক করতে পারেন, যেমন ইউজার অথেন্টিকেশন চেক করা। গার্ডগুলো মূলত ইউজারের সিকিউরিটি এবং অ্যাপ্লিকেশনের ফ্লো ম্যানেজমেন্টের জন্য গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।